<template>
    <div class="user_home">
        <div class="header">我的</div>
        <div class="content">
            <div class="tx">
                <div class="tx_item">
                    <div class="photo" @click="$router.push({name: 'personal'})" style="overflow: hidden;"><img style="width: 100%;height: 100%;" :src="$store.state.userinfo.user_head" alt=""></div>
                    <div class="username">{{$store.state.userinfo.username ?$store.state.userinfo.username:$store.state.userinfo.telphone}}</div>
                    <div class="editor">查看或编辑个人主页</div>
                </div>
            </div>
            <div class="grxx" id="change_info" style="border-bottom: 0" @click="$router.push({name:'change_pwd'})">
                <i style="color:#fe555d;" class="iconfont icon-xiugaixinxi"></i>修改信息
            </div>
            <div class="grxx" style="margin-bottom: 0;" @click="real">
                <i style="color:#a1ddb5;" class="iconfont icon-shimingrenzhengmoren"></i>实名认证
            </div>
            <div class="grxx" style="margin-bottom: 0;" @click="$router.push({ name: 'bill_details'})">
                <i style="color:#ffa84b" class="iconfont icon-chakandingdan"></i>我的账单
            </div>
            <div class="grxx" style="margin-bottom: 0;" @click="getod">
                <i style="color: #518aec;" class="iconfont icon-sousuo" ></i>我的租约
            </div>
            <!--<div class="grxx" style="margin-bottom: 0;">
                <i style="color: #b48ffc;" class="iconfont icon-kanfanghangcheng"></i>看房行程
            </div>-->
            <div class="grxx" style="margin-bottom: 0;">
                <i style="color: #f4d45d;" class="iconfont icon-zizhujiaofei"></i>自主缴费
            </div>
            <div class="grxx"  @click='contra' style="margin-bottom: 0;border-bottom: 0;">
                <i style="color:#fe555d;" class="iconfont icon-lianxiwomen"></i>联系我们
            </div>
            <div class="bt">
                <button class="exit" @click="exit">退出登录</button>
            </div>
        </div>
        <div class="footer">
            <div class="nav">
                <div class="nav_item" ref="nav_item1" @click="go_nav('bill_details','nav_item1')">
                    <i class="iconfont icon-jiaofei"></i>
                    <li>缴费</li>
                </div>
                <div class="nav_item" ref="nav_item2" @click="go_nav('list','nav_item2')">
                    <i class="iconfont icon-fangyuan"></i>
                    <li @click="$router.push({name:'list'})">房源</li>
                </div>
                <div class="nav_item" @click="go_nav('usercenter','nav_item3')" style="margin-right: 0;color: #ffb001" ref="nav_item3">
                    <i class="iconfont icon-wodedangxuan"></i>
                    <li>我的</li>
                </div>
            </div>
        </div>
        <md-dialog
                title="提示"
                :closable="false"
                v-model="actDialog.open"
                :btns="actDialog.btns"
        >
            您有订单未完成，请前往完善或取消
        </md-dialog>
        <md-dialog
                title="提示"
                :closable="false"
                v-model="actDialogset.open"
                :btns="actDialogset.btns"
        >
            您未设置密码，请前往设置
        </md-dialog>
        <md-dialog
                title="实名提示"
                :closable="true"
                v-model="actDialogreal.open"
                :btns="actDialogreal.btns"
        >
            您未实名，是否现在实名？
        </md-dialog>
    </div>
</template>

<script>
import '@/css/user_home.css';
import { Toast } from 'mint-ui';
import { Dialog, Button } from 'mand-mobile';


    export default {
        name: 'Home',
        components: {
            [Dialog.name]: Dialog,
            [Button.name]: Button,
        },
        data() {
            return {
                order_state: '',
                ordertype: '',
                res:'',
                actDialog: {
                    open: false,
                    btns: [
                        {
                            text: '取消',
                            handler: this.onActCancel,
                        },
                        {
                            text: '确认',
                            handler: this.onActConfirm,
                        },
                    ],
                },
                actDialogset: {
                    open: false,
                    btns: [
                        {
                            text: '取消',
                            handler: this.onActCancelset,
                        },
                        {
                            text: '确认',
                            handler: this.onActConfirmset,
                        },
                    ],
                },
                actDialogreal: {
                    open: false,
                    btns: [
                        {
                            text: '取消',
                            handler: this.noto,
                        },
                        {
                            text: '确认',
                            handler: this.toreal,
                        },
                    ],
                },

            };
        },
        async mounted() {
            const _res = await this.$api.post('/user/getuserbyId', { uid: this.$store.state.userinfo.uid });/* 用户信息 */
            console.log(_res);
            if (_res.data.state) {
                console.log('state=1');
                console.log(this.order);
                const res = await this.$api.post('/user/getorderbyId', { uid: this.$store.state.userinfo.uid });/* 请求未签约订单,判断用户有没有 */
                this.res=res;
                console.log(res);
                if (res.data.state) {
                    this.order_state = res.data.data.order_state;
                    if (res.data.data.order_state == 0) {
                        this.actDialog.open = true;
                    } else {
                        this.$router.push({ name: 'order' });
                    }
                }
                /*   if (_res.data.data.order !== null) { /!* 判断有无订单 *!/
                  console.log('order !== null');
                   if (this.order.isDelete !== 0) {
                    this.ordertype = _res.data.data.order.order_state;
                    console.log(this.ordertype);
                    if (_res.data.data.order.order_state == 0) {

                    }
                  }
                } */
            }
        },
        methods: {
            real() {
                if (this.$store.state.userinfo.idcard) {
                    Toast({
                        message: '您已实名，正在前往实名详情',
                    });
                    setTimeout(() => {
                        this.$router.push({ name: 'realname_details' });
                    }, 2000);
                } else {
                    this.actDialogreal.open = true;
                    console.log(this.$store.state.userinfo.idcard);
                }
            },
            noto() {
                this.actDialogreal.open = false;
            },
            toreal() {
                this.$router.push({ name: 'realname' });
            },
            go_nav(nav, index) {
                this.$router.push({ name: nav });
                const lists = document.querySelectorAll('.nav_item');
                for (const v of lists) {
                    v.style.color = '#8e8e8e';
                }
                this.$refs[index].style.color = '#ffb001';
                console.log(this.$refs[index]);
            },
            contra() {
                this.$router.push({ name: 'conect' });
            },
            exit() {
                this.$store.state.userinfo = { };
                Toast({
                    message: '已退出',
                    iconClass: 'icon icon-success',
                });
                this.$router.replace({ name: 'pwdLogin' });
                setTimeout(() => { this.$store.commit('updateUserinfo', this.$store.state.userinfo); }, 2000);
            },
            onActCancel() { /* 取消 */
                this.actDialog.open = false;
            },
            onActConfirm() { /* 确认 */
                if (this.$store.state.userinfo.real_name) {
                    this.$router.push({ name: 'contract_list' });/* 跳到未订单页 */
                    this.actDialog.open = false;
                } else {
                    Toast({
                        message: '您未实名，请先实名',
                    });
                    this.actDialog.open = false;
                }
            },
            onActCancelset() { /* 取消 */
                this.actDialogset.open = false;
            },
            onActConfirmset() { /* 确认 跳到设置密码界面 */
                this.$router.push({ name: 'setPwd' });
                this.actDialogset.open = false;
            },
            async getod() { // 判断用户有没有租约，有就跳到租约详情页，没有就提示。
                console.log('判断用户有没有租约');
                const rs = await this.$api.post('/user/order', { uid: this.$store.state.userinfo.uid });
                console.log(rs);
                if (rs.data.state) {
                    if (rs.data.data == null || rs.data.data.isDelete == 0) {
                        Toast({
                            message: '您未有租约',
                            duration: 1000,
                        });
                    } else {
                        this.order_state = rs.data.data.order_state;
                        if (rs.data.data.order_state == 0) {
                            this.actDialog.open = true;
                        } else {
                            this.$router.push({ name: 'order' });
                        }

                    }
                }
            },


        },
        async created() {
            // 判断用户是否登录,如果没有登录,则跳到用户登录界面
            if (!this.$store.state.userinfo.uid) {
                this.$router.replace({ name: 'pwdLogin' });
            }

            // 判断用户是否有密码,如果没有跳到设置密码界面
            /* if (!this.$store.state.userinfo.password) {
                this.actDialogset.open = true;
              /!* this.$router.replace({ name: 'setPwd' }); *!/

    }*/



  },
};
</script>

<style scoped>

</style>
